<template>
	<div v-loading="contentLoading" class="app-container">
		<jk-left-menu
			:menu-data="menuList"
			:active-menu="activeMenuItem.code"
			:show-count="false"
			@on-menu="onMenuChange"
		>
			<header slot="header" ref="searchBar" class="width-100-percent flex-between-center">
				<jk-add-button :permission-prefix="prefix" :disabled="!activeMenuItem.code" class="margin-5-0 item-gap" @click="onAddBtn"></jk-add-button>
				<div class="flex-start-center">
					<jk-search-input v-model="searchParams.name" placeholder="名称" size="small" class="search-bar-item-size3 margin-5-0 item-gap" clearable @change="onSearchBtn" @on-search="onSearchBtn" @clear="onSearchBtn" @keyup.enter.native="onSearchBtn" />
					<jk-search-button @click="onSearchBtn"></jk-search-button>
				</div>
			</header>
			<jk-table ref="jkTable" class="width-100-percent" :loading="tableLoading" :data="tableData" border :height="tableHeight - 20">
				<vxe-table-column field="code" title="编号" sortable min-width="180" />
				<vxe-table-column field="name" title="名称" min-width="120" />
				<vxe-table-column field="sortNum" title="排序" width="80" align="center"></vxe-table-column>
				<vxe-column title="创建人" align="left" field="creatorName" width="90"></vxe-column>
				<vxe-column title="创建时间" align="left" field="createTime" width="160"></vxe-column>
				<vxe-column title="修改人" align="left" field="updaterName" width="90"></vxe-column>
				<vxe-column title="修改时间" align="left" field="updateTime" width="160"></vxe-column>
				<vxe-table-column align="center" title="操作" fixed="right" width="180">
					<template #default="scope">
						<div class="flex-center">
							<jk-delete-button :permission-prefix="prefix" class="item-gap" @on-confirm="onConfirmBtnOfDelete(scope.row.id)" />
							<jk-edit-button :permission-prefix="prefix" @click="onEditBtn(scope.row.id)"></jk-edit-button>
						</div>
					</template>
				</vxe-table-column>
			</jk-table>
			<footer ref="box2" class="flex-end-center margin-top-10">
				<jk-page
					:page-index="searchParams.pageNo"
					:page-sizes="searchParams.pageSizes"
					:page-size="searchParams.pageSize"
					:total="totalCount"
					@on-change="onPageChange"
				/>
			</footer>
			<saveDialog
				:dialog-state="saveDialogState"
				:data-id="dataId"
				:active-menu-item="activeMenuItem"
				@on-visible-change="onVisibleChangeOfSaveDialog"
				@on-confirm="onConfirmButtonSaveDialog"
			/>
		</jk-left-menu>
	</div>
</template>

<script>
    import { systemBusinessDictPage, systemBusinessDictDelete } from '../../../api/basicData/businessDict';
    import saveDialog from './save-dialog';
    import calHeight from '../../../mixins/cal-table-height';
    import { systemBusinessDictCategoryPage } from '../../../api/basicData/businessDictCategory';
    import { pageConfig } from '../../../utils/jk/jk-tool';
    export default {
        name: 'Dictionary',
        components: { saveDialog },
        mixins: [calHeight],
        data() {
            return {
                prefix: 'system:businessDict',
                contentLoading: false,
                tableLoading: false,
                saveDialogState: false,
                dataId: null,
                tableData: [],
                disabled: true,
                menuList: [],
                codeList: [],
                activeMenuItem: {
                    code: '',
                    id: null,
                    name: ''
                },
                editNumId: null,
                sortNum: null,
                isSortNum: true,
                openId: null,
                totalCount: 0,
                searchParams: {
                    pageNo: pageConfig.pageNo,
                    pageSize: pageConfig.pageSize,
                    name: '',
                    auditState: null,
                    workshopId: null
                }
            };
        },
        activated() {
            this.getDependentDataRequest();
        },
        mounted() {
            this.contentLoading = true;
            this.getDependentDataRequest();
        },
        methods: {
            onPageChange(e, size) {
                this.$set(this.searchParams, 'pageNo', e);
                this.$set(this.searchParams, 'pageSize', size);
                this.getListRequest();
            },
            onSearchBtn() {
                this.pageNo = 1;
                this.getListRequest();
            },
            clearCacheMethod() {
                // Object.assign(this.$data, this.$options.data());

                this.contentLoading = true;
                this.getDependentDataRequest();
            },
            getListRequest() {
                this.tableLoading = true;
                const params = { categoryCode: this.activeMenuItem.code };
                params.pageSize = 100;
                params.pageNo = 1;
                return systemBusinessDictPage(params).then(res => {
                    if (res.data.status === 200) {
                        this.tableData = res.data.res;
                        this.totalCount = res.data.count;
                    }
                    this.contentLoading = false;
                    this.tableLoading = false;
                });
            },
            // 新增
            onAddBtn() {
                this.saveDialogState = true;
            },
            onVisibleChangeOfSaveDialog(e) {
                this.saveDialogState = e;
                if (!e) {
                    this.dataId = null;
                }
            },
            onConfirmButtonSaveDialog() {
                this.saveDialogState = false;
                this.getListRequest();
            },
            // 编辑
            onEditBtn(id) {
                this.dataId = id;
                this.saveDialogState = true;
            },
            onConfirmBtnOfDelete(id) {
                systemBusinessDictDelete({ id: id }).then(res => {
                    if (res.data.status === 200) {
                        this.getListRequest();
                        this.$tipsBar(this, 'delete');
                    }
                });
            },
            getMenuListRequest() {
                return systemBusinessDictCategoryPage({
                    pageSize: 100
                }).then(res => {
                    if (res.data.status === 200) {
                        this.menuList = res.data.res.map((item, index) => {
                            item.count = index;
                            return item;
                        });
                        this.activeMenuItem = res.data.res.length ? res.data.res[0] : {};
                    }
                });
            },
            async getDependentDataRequest() {
                this.contentLoading = true;
                await this.getMenuListRequest();
                await this.getListRequest();
            },
            onMenuChange(item) {
                this.activeMenuItem = item;
                this.getListRequest();
            }
        }
    };
</script>
<style scoped>

</style>
